<template>
  <page-layout>
      <!-- table区域-begin -->
      <a-row :gutter="10">
        <a-col :md="leftColMd" :sm="24">
          <a-card :bordered="false">
            <div >
              <a-form @keyup.enter.native="searchQuery">
                <a-row :gutter="12">
                  <a-col :md="12" :sm="12">
                    <a-form-item label="角色名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                      <a-input placeholder="输入角色名称" v-model="queryParam.name"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="12" :sm="12">
                    <a-form-item>
                      <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
              <vxe-grid
                id="RoleList"
                keep-source
                ref="vxeTable"
                v-bind="options"
                :row-config="{isCurrent:true}"
                :radio-config="{trigger:'row'}"
                @radio-change="onSelectChange"
              >
              <template #action="{ row }">
                <template>
                  <a @click="handleEdit(row)" >编辑</a>
                  <a-divider type="vertical" />
                  <a-dropdown>
                    <a class="ant-dropdown-link">
                      更多 <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item>
                        <a href="javascript:;" @click="handleEditPerssion(row)">菜单权限</a>
                      </a-menu-item>
                      <a-menu-item>
                        <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                          <a>删除</a>
                        </a-popconfirm>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </template>
              </template>
            </vxe-grid>
          </a-card>
        </a-col>
        <a-col :md="rightColMd" :sm="24">
          <a-card :bordered="false">
            <a-tabs default-active-key="1" >
              <a-tab-pane key="1" tab="已关联用户">
                <RoleWithinUserList :roleId="currentRow.id" refs="RoleWithinUserList" />
              </a-tab-pane>
              <a-tab-pane key="2" tab="已关联部门">
                <RoleWithinDeptList :roleId="currentRow.id" refs="RoleWithinDeptList" />
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </a-col>
      </a-row>
      <!-- table区域-end -->
      <RoleModal ref="modalForm" @ok="modalFormOk" :deptTree="dataSource" />
      <!-- 菜单权限 -->
      <perssion-modal ref="perssionModal" />

  </page-layout>
</template>

<script>
import RoleModal from './modules/RoleModal'
import PerssionModal from './modules/PerssionModal'
import PageLayout from '@/layouts/PageLayout'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import RoleWithinUserList from './modules/RoleWithinUserList'
import RoleWithinDeptList from './modules/RoleWithinDeptList'
export default {
  name: 'DeptList',
  components: {
    RoleModal,
    PageLayout,
    PerssionModal,
    RoleWithinUserList,
    RoleWithinDeptList
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      columns: [
        { type: 'radio', width: 40 },
        { type: 'seq', width: 80 },
        {
          title: '角色名称',
          align: 'center',
          field: 'name'
        },
        {
          title: '描述',
          align: 'center',
          field: 'description'
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          align: 'center',
          width: 170
        }
      ],
      url: {
        list: '/role/page',
        delete: '/role/remove/'
      },
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      toggleSearchStatus: false,
      currentRow: {}
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    leftColMd() {
      return this.selectedRowKeys.length === 0 ? 24 : 14
    },
    rightColMd() {
      return this.selectedRowKeys.length === 0 ? 0 : 10
    }
  },
  methods: {
    handleEditPerssion: function(record) {
      this.$refs.perssionModal.show(record.id)
    },
    onSelectChange({ row }) {
      this.selectedRowKeys = [row.id]
      this.selectionRows = [row]
      this.currentRow = row
    }
  }
}
</script>

